import React, { useEffect, useState } from 'react';
import { Card, Space, Col, Row, Descriptions, Button } from 'antd';
import serviceless from './index.less';
import * as echarts from 'echarts';
import { echartsResize } from '@/utils/index';
import { connect } from 'umi';

type Props = {};

const index = (props: any) => {
  const [num, setNum] = useState(0);

  useEffect(() => {
    props.list.length?'':props.dispatch({ type: 'area/getservicelist' })
  }, []);

  useEffect(() => {
    var option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, num],
          type: 'line',
          smooth: true,
        },
      ],
    };
    var chartDom = document.getElementById('main') as HTMLElement;
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
    echartsResize(myChart);
    return () => {
      myChart.dispose();
    };
  }, [num]);
  // 监听数据更改就重新初始化
  return (
    <div>
      <Row gutter={16}>
        <Col span={16}>
          <div className="left">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Card title="数据统计" className={serviceless.card}>
                <Row gutter={[8, 8]}>
                  <Col span={12}>
                    <div className={serviceless.box}>
                      <span>客服总数</span>
                      <p>{props.list.length}</p>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className={serviceless.box}>
                      <span>当前在线客服</span>
                      <p>0</p>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className={serviceless.box}>
                      <span>当前在线访客</span>
                      <p>1</p>
                    </div>
                  </Col>
                  <Col span={12}>
                    <div className={serviceless.box}>
                      <span>今日会话</span>
                      <p>0</p>
                    </div>
                  </Col>
                </Row>
              </Card>

              <Card title="报表统计" className={serviceless.card}>
                <div id="main" style={{ width: '100%', height: '420px' }}></div>
              </Card>
            </Space>
          </div>
        </Col>
        <Col span={8}>
          <div className="right">
            <Space direction="vertical" style={{ width: '100%' }}>
              <Card title="版本信息" className={serviceless.card}>
                <Descriptions bordered column={1} size={'small'}>
                  <Descriptions.Item label="项目名称">
                    宏烨找房在线客服系统
                  </Descriptions.Item>
                  <Descriptions.Item label="当前版本">v1.0.1</Descriptions.Item>
                  <Descriptions.Item label="主要特色">
                    {' '}
                    方便部署 / 快速接入
                  </Descriptions.Item>
                </Descriptions>
              </Card>
            </Space>
          </div>
        </Col>
      </Row>
      <Button
        onClick={() => {
          setNum(num + 100);
        }}
      >
        点我
      </Button>
    </div>
  );
};

const mapStateToProps = (state: any) => {
  const {
    area: { list },
  } = state;
  return {
    list,
  };
};

export default connect(mapStateToProps)(index);
